<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="./lib/mui/mui.min.css">
<link rel="stylesheet" href="./lib/swiper/swiper.min.css">
<link rel="stylesheet" href="./css/land.css">
<style type="text/css">
.lay-wrapper{display:table;position:absolute;top:0;left:0;right:0;height:100%;z-index: 1000;}
.lay-wrapper-inner{display:table-cell;vertical-align: middle;text-align: center;}
/*.header-title{margin: 0 auto;}*/
.swiper-container {padding-top:20px;padding-bottom:20px;}
.swiper-slide {background-position: center;background-size: cover;}
.swiper-pagination.swiper-pagination-bullets{display: none;}
@media only screen and (max-width: 765px) {
    .swiper-wrapper>div{transform: translateX(150px);width: 150px !important;height: 200px;border-top-left-radius:8px;border-top-right-radius:8px;}
}
@media only screen and (min-width: 765px) {
    .swiper-wrapper>div{transform: translateX(150px);width: 360px !important;height: 460px;border-top-left-radius:16px;border-top-right-radius:16px;}
}
/*手机横屏*/
@media only screen and (max-width: 765px) and (min-width: 400px){
.header-title img{
	width: 60%;
}
.header-title .title-small{
	margin-bottom: 10px;
}
.wrapper-bttom{
	margin-top: 10px;
}
}
</style>
</head>
<body>
<div class="mui-content">
    <div class="lay-wrapper">
        <div class="lay-wrapper-inner">
            <div class="header-title">
                <div class="title-main"><p><img src="img/main_toptitle.png"></p></div>
                <div class="title-small"><p><img src="img/main_futitle.png"></p></div>
            </div>
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide" style="background-image:url(./img/photo/1.png);background-position: bottom center;">
                    </div>
                    <div class="swiper-slide" style="background-image:url(./img/photo/2.png);background-position: bottom center;">
                    </div>
                    <div class="swiper-slide" style="background-image:url(./img/photo/3.png);background-position: bottom center;">
                    </div>
                    <div class="swiper-slide" style="background-image:url(./img/photo/4.png);background-position: bottom center;">
                    </div>
                    <div class="swiper-slide" style="background-image:url(./img/photo/5.png);background-position: bottom center;">
                    </div>
                </div>
                <!-- Add Pagination -->
                <div class="swiper-pagination"></div>
            </div>
            <div class="wrapper wrapper-bttom">
                <p>武汉市国土资源和规划信息中心 V1.0</p>
            </div>
        </div>
    </div>
</div>
<script src="./lib/mui/mui.min.js"></script>
<script src="./lib/jquery.min.js"></script>
<script src="./lib/swiper/swiper.min.js"></script>

<script>   
	//重新调整大小
	function Resize(){
		$('.swiper-container').width($(window).width());
		if(document.body.clientWidth <= 765){        
	        var swiper = new Swiper('.swiper-container', {            
	        pagination: '.swiper-pagination',
	        effect: 'coverflow',
	        grabCursor: true,
	        centeredSlides: true,
	        slidesPerView: 'auto',
	        loop:true,
	
	        freeModeMomentumRatio:1,
	        coverflow: {   
	            width:(swiper*0.3),
	            rotate: 0,
	            stretch: 0,
	            depth: 50,
	            modifier:5,
	            slideShadows : true
	        }
	    });
	    $('.swiper-container .swiper-slide-active').css({'transform':'scale(1) !important'})
    }else{
        var swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        effect: 'coverflow',
        grabCursor: true,
        centeredSlides: true,
        slidesPerView: 'auto',
        loop:true,
        freeMode:true,
        freeModeMomentumRatio:1,
        coverflow: {
            rotate: 0,
            stretch: 0,
            depth: 100,
            modifier:2.5,
            slideShadows : true
        }
    });
    	$('.swiper-container .swiper-slide-active').css({'transform':'scale(1.1) !important'})
    }
	}
    Resize()
    $(window).resize(function(){
    	Resize()
    })
    </script>
<script type="text/javascript">
    mui('.swiper-wrapper').on('tap','.swiper-slide',function(){
        mui.openWindow({
            url:"./index.html",
            id:"index",
            styles:{
                top:0,
                bottom:0,
                width:'100%',
                height:'100%'
            },
            show:{
                autoShow:true,//页面loaded事件发生后自动显示，默认为true
                aniShow:'slide-in-right',//页面显示动画，默认为”slide-in-right“；
                duration:2000//页面动画持续时间，Android平台默认100毫秒，iOS平台默认200毫秒；
            },
            waiting:{
                autoShow:true,//自动显示等待框，默认为true
                title:'正在加载...'//等待对话框上显示的提示内容
                
            }
        })
    })    

</script>
</body>
</html>